<template>
  <view class="tousu-jianyi" style="padding: 40rpx">
    <view style="background-color: #fff; padding: 20rpx; height: 150rpx; border-radius: 20rpx">
      <view style="margin: 10rpx 0; font-size: 28rpx">联系方式</view>
      <u-input type="number" maxlength="11" placeholderStyle="color: #999;font-size: 14px;" placeholder="请输入手机号码" border="surround" v-model="phone" @change="change"></u-input>
    </view>
    <view style="background-color: #fff; padding: 20rpx; min-height: 600rpx; border-radius: 20rpx; margin-top: 20rpx">
      <view style="margin: 10rpx 0; font-size: 28rpx">问题描述与凭证</view>
      <u-textarea
        height="300rpx"
        count
        maxlength="200"
        placeholderStyle="color: #999;font-size: 14px;"
        placeholder="请描述具体投诉反馈内容（包含但不限于投诉原因，预期解决方案等）并上传相关凭证图片（包含但不限于反馈问题截图、程序截图等）"
        border="surround"
        v-model="content"
      ></u-textarea>
      <u-gap height="12" bgColor="#fff"></u-gap>
      <view style="margin: 10rpx 0; font-size: 28rpx">图片</view>
      <u-upload height="120" width="120" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10">
        <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/05/15/编组 11@2x_20250515113154A066.png" style="width: 130rpx; height: 130rpx"></image>
      </u-upload>
    </view>
    <view style="display: flex; align-items: center; justify-content: space-between">
      <view
        style="
          background-color: #dadaff;
          color: #4560ff;
          padding: 10rpx;
          border-radius: 10rpx;
          margin-top: 20rpx;
          font-size: 26rpx;
          font-weight: bold;
          cursor: pointer;
          width: 300rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        @click="backs"
        >返回</view
      >
      <view
        style="
          background-color: #4560ff;
          color: #fff;
          padding: 10rpx;
          border-radius: 10rpx;
          margin-top: 20rpx;
          font-size: 26rpx;
          font-weight: bold;
          cursor: pointer;
          width: 300rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        "
        @click="submitadd"
        >提交</view
      >
    </view>
  </view>
</template>

<script>
import { suggestions } from "../../../utils/api/tousu.js";
export default {
  data() {
    return {
      phone: "",
      content: "",
      fileList1: [],
      fileName: [],
    };
  },
  methods: {
    backs() {
      uni.navigateBack({
        delta: 1,
      });
    },
    /* 投诉建议提交 */
    submitadd() {
      if (this.phone == "") {
        uni.showToast({
          title: "请填写手机号码",
          icon: "none",
          duration: 2000,
        });
        return;
      }
      if (this.content == "") {
        uni.showToast({
          title: "请填写问题描述",
          icon: "none",
        });
        return;
      }
      let params = {
        ebUserPhone: this.phone,
        massage: this.content,
        image: this.fileName.toString(),
        ebUserId: uni.getStorageSync("uid"),
      };
      suggestions(params).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "提交成功",
            icon: "none",
          });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 1000);
        } else {
          uni.showToast({
            title: "提交失败",
            icon: "none",
          });
        }
      });
    },
    change() {
      this.phone = this.phone.replace(/\D/g, "");
    },
    // 删除图片
    deletePic(event) {
      this[`fileList${event.name}`].splice(event.index, 1);
      this.fileName.splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event) {
      // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          }),
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        const token = uni.getStorageSync("token");
        let a = uni.uploadFile({
          header: {
            Authorization: token,
          },
          url: "https://www.wantongkonggu.cn/api/adminApph7/common/upload", // 仅为示例，非真实的接口地址
          filePath: url,
          name: "file",
          formData: {
            user: "test",
          },
          success: (res) => {
            let datas = JSON.parse(res.data);
            this.fileName.push(datas.fileName);
            setTimeout(() => {
              resolve(res.data.data);
            }, 1000);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
